<template>
  <div class="page-siteView">
    <a-tabs
      v-model:activeKey="statusState.site_status"
      :tabBarGutter="39"
      :tabBarStyle="{ borderBottom: 'none' }"
      @change="handleChange"
      class="h-full"
    >
      <a-tab-pane :key="1" tab="启用中站点" class="h-full">
        <filter-view :type="statusState.site_status" @update-list="() => getActiveList()" />
        <div v-if="state.activeLoading" class="flex items-center justify-center w-full h-full">
          <a-spin :spinning="state.activeLoading" size="large" tip="加载中..." />
        </div>
        <div v-else class="h-full">
          <div v-if="state.siteList.length > 0" class="h-full">
            <div v-if="!statusState.isActiveModule" class="h-[97%] overflow-auto" @scroll="scrollEvent($event)">
              <module-list :list="state.siteList" :type="statusState.site_status" @updateList="() => getActiveList()" />
            </div>
            <div v-else class="h-[97%] overflow-y-scroll">
              <normal-list :list="state.siteList" :type="statusState.site_status" @updateList="() => getActiveList()" />
            </div>
          </div>
          <NoData v-else :status="statusState.site_status" />
        </div>
        <a-pagination
          v-if="statusState.isActiveModule"
          show-size-changer
          :defaultPageSize="10"
          :pageSizeOptions="['10', '20', '50', '100']"
          :show-total="(total:number)=>`共${total}条`"
          :total="pagination.total"
          @change="handlePaginationChange"
        />
      </a-tab-pane>
      <a-tab-pane :key="2" tab="已禁用">
        <filter-view :type="statusState.site_status" @update-list="() => getDisabledList()" />
        <div v-if="state.activeLoading" class="flex items-center justify-center w-full h-full">
          <a-spin :spinning="state.activeLoading" size="large" tip="加载中..." />
        </div>
        <template v-else class="h-full">
          <div v-if="state.disableList?.length > 0" class="h-full">
            <div v-if="!statusState.isActiveModule" class="h-[97%] overflow-auto" @scroll="scrollEvent2($event)">
              <module-list
                :list="state.disableList"
                :type="statusState.site_status"
                @updateList="() => getDisabledList()"
              />
            </div>
            <div v-else>
              <normal-list
                :list="state.disableList"
                :type="statusState.site_status"
                @updateList="() => getDisabledList()"
              />
            </div>
          </div>
          <NoData v-else :status="statusState.site_status" text="还没有禁用中的站点" />
        </template>
        <a-pagination
          v-if="statusState.isActiveModule"
          show-size-changer
          :defaultPageSize="10"
          :pageSizeOptions="['10', '20', '50', '100']"
          :show-total="(total:number)=>`共${total}条`"
          :total="pagination2.total"
          @change="handlePaginationChange2"
        />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import ModuleList from './components/ModuleList.vue'
import NormalList from './components/NormalList.vue'
import FilterView from './components/FilterView.vue'
import type { SiteItem } from '@/types/site/site'
import { siteState, statusState, resetState } from './state'
import NoData from './components/NoData.vue'
import apis from '@/apis'
import { message } from 'ant-design-vue'
const randomKey = ref()
const {
  site: { list }
} = apis
interface IState {
  activeLoading: boolean
  siteList: SiteItem[]
  disableList: SiteItem[]
}
const state = reactive<IState>({
  siteList: [],
  disableList: [],
  activeLoading: false
})
//启用中接口
const getActiveList = () => {
  state.activeLoading = true
  // 更新列表接口
  if (!siteState.site_id) siteState.site_id = undefined
  // 启用中列表
  list({ ...siteState, ...pagination, site_status: statusState.site_status })
    .then((res: any) => {
      state.siteList = res.sites
      pagination.total = res?.total ?? 0
      state.activeLoading = false
      //处理下一页，第一条删除问题
      if (pagination.offset >= (res?.sites ?? 0) && pagination.total != 0) {
        pagination.offset -= pagination.limit
        getActiveList()
      }
    })
    .catch(() => {
      state.activeLoading = false
    })
}
/**
 * 分页改变事件
 */
const handlePaginationChange = (size: number, limit: number) => {
  pagination.limit = limit
  pagination.offset = (size - 1) * limit
  getActiveList()
}
//禁用中接口
const getDisabledList = () => {
  state.activeLoading = true
  list({ ...siteState, ...pagination2, site_status: statusState.site_status })
    .then((res: any) => {
      state.disableList = res.sites
      pagination2.total = res?.total ?? 0
      // pagination.total=res.
      state.activeLoading = false
      //处理下一页，第一条删除问题
      if (pagination2.offset >= (res?.sites ?? 0) && pagination2.total != 0) {
        pagination2.offset -= pagination2.limit
        getDisabledList()
      }
    })
    .catch(() => {
      state.activeLoading = false
    })
}
/**
 * 分页改变事件
 */
const handlePaginationChange2 = (size: number, limit: number) => {
  console.log('size, limit: ', size, limit)
  pagination2.limit = limit
  pagination2.offset = (size - 1) * limit
  getDisabledList()
}
const handleChange = (key: number) => {
  randomKey.value = Math.random()
  pagination.offset = 0
  pagination2.offset = 0
  isFinished.value = false
  isFinished2.value = false
  resetState()
  if (key === 1) {
    getActiveList()
    // console.log('normalRef1.value: ', normalRef1.value)
    // normalRef1.value.initSortable()
  } else {
    getDisabledList()
    // console.log('normalRef2.value: ', normalRef2.value)
    // normalRef2.value.initSortable()
  }
}
const pagination = reactive({
  offset: 0,
  limit: 10,
  total: 0
})
const isLoading = ref(false)
const isFinished = ref(false)
const scrollEvent = (e: any) => {
  const { target } = e
  let scrollTop = target.scrollTop
  // 获取可视区的高度
  let clientHeight = target.clientHeight
  // 获取滚动条的总高度
  let scrollHeight = target.scrollHeight
  console.log('scrollTop: ', +scrollTop.toFixed(0), clientHeight, scrollHeight)
  //到底了
  //是否继续加载且已完成加载
  if (+scrollTop.toFixed(0) + clientHeight == scrollHeight && !isFinished.value) {
    pagination.offset += 10 //分页器自增10
    console.log('到底了')
    // 把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
    isLoading.value = true
    list({ ...siteState, ...pagination, site_status: statusState.site_status })
      .then((res: any) => {
        console.log('执行111')
        if (res.sites.length > 0) {
          state.siteList = [...state.siteList, ...res.sites]
        } else {
          message.warning('没有更多了')
          isFinished2.value = true
        }
        isLoading.value = false
      })
      .catch(() => {
        state.activeLoading = false
      })
  }
}
const pagination2 = reactive({
  offset: 0,
  limit: 10,
  total: 0
})
const isLoading2 = ref(false)
const isFinished2 = ref(false)
const scrollEvent2 = (e: any) => {
  const { target } = e
  let scrollTop = target.scrollTop
  // 获取可视区的高度
  let clientHeight = target.clientHeight
  // 获取滚动条的总高度
  let scrollHeight = target.scrollHeight

  console.log('scrollTop: ', +scrollTop.toFixed(0), clientHeight, scrollHeight)
  //到底了
  //是否继续加载且已完成加载
  // 把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
  console.log('isFinished.value: ', isFinished.value, !isFinished2.value)
  if (+scrollTop.toFixed(0) + clientHeight == scrollHeight && !isFinished2.value) {
    pagination2.offset += 10 //分页器自增10
    isLoading2.value = true
    list({ ...siteState, ...pagination2, site_status: statusState.site_status })
      .then((res: any) => {
        if (res.sites.length > 0) {
          state.disableList = [...state.disableList, ...res.sites]
        } else {
          message.warning('没有更多了')
          isFinished2.value = true
        }
        isLoading2.value = false
      })
      .catch(() => {
        isLoading2.value = false
      })
  }
}
watch(
  () => statusState.isActiveModule,
  () => {
    pagination2.offset = 0
    isFinished.value = false
    pagination.offset = 0
    isFinished2.value = false
    if (statusState.site_status === 1) {
      getActiveList()
      // normalRef1.value.initSortable()
    } else {
      getDisabledList()
      // normalRef2.value.initSortable()
    }
  },
  {
    deep: true,
    immediate: true
  }
)
onMounted(() => {
  if (statusState.site_status === 1) return getActiveList()
  getDisabledList()
})
</script>

<style lang="less" scoped>
.page-siteView {
  height: 100%;
  :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: #0083ff;
    text-shadow: 0 0 0.25px currentcolor;
  }
  :deep(.ant-tabs-content) {
    height: 100%;
  }
  :deep(ant-tabs-nav-wrap) {
    width: auto;
    border-bottom: 1px solid #fff;
  }
  :deep(.ant-tabs-nav) {
    width: 152px;
  }
  :deep(ant-tabs-nav-list) {
    border-bottom: 1px solid #f1f1f1;
  }
}
</style>
